<template>
  <div class="leftMain_middle">
    <div class="leftMain_middle_left">
      <div class="leftMain_middle_leftIn">
        <Bar />
        <Border />
      </div>
    </div>
    <div class="leftMain_middle_right">
      <div class="leftMain_middle_rightIn">
        <h3>{{ $t('漏洞占比排行') }}</h3>
        <div class="biaoge biaoge_pai" style="width:100%; height:1vh" v-for="(item, index) in BugData" :key="index">
          <div class="biaoge_paiIn">
            <ul>
              <li>
                <div class="liIn" :class="'color-' + index">
                  <div class="liIn_left"><span class="bot" :style="{ backgroundColor: getColor(index) }"></span><span
                      class="Top">Top{{ index + 1 }}</span><span class="zi">{{ item.attackType }}</span></div>
                  <div class="liIn_line">
                    <div class="line_lineIn" :style="{ width: item.count, backgroundColor: getColor(index) }"></div>
                  </div>
                  <p class="num">{{ item.count }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <Border />
      </div>
    </div>
  </div>
</template>


<script setup>
import Bar from './view/Bar.vue'
import Border from "./view/Border.vue";
import { ref } from 'vue'
import { getBugTopData } from '~/api/screen'

const BugData = ref([])
getBugTopData().then(res => {
  console.log('leftmid', res)
  BugData.value = res.data
})
const colors = ['#7accec', '#83d4ff', '#83cbff', '#83c2ff', '#83b9ff', '#83b0ff', '#839eff', '#8395ff', '#838cff', '#8383ff']
const index = [1, 2, 3, 4, 5, 6, 7, 8, 9]

function getColor(index) {
  const colorIndex = index % colors.length // 获取对应颜色的索引
  return colors[colorIndex] // 返回对应的颜色值
}
</script>

<style scoped>
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge {
  min-height: 30px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
  display: flex;
  align-items: center;
  width: 35%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
  background: red;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .Top {
  margin-right: 15px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {

  background: #2438e0;
  -webkit-animation: widthMove1 2s ease-in-out;
}
</style>